<template>
  <div>
    <search-conditon @search="searchHandler" :addBtnShow="addBtnShow"></search-conditon>
    <div class="search-result">
      <search-result :totalSize="totalSize" :pageSize.sync="pageSize" :pageNum.sync="pageNum" :searchResult="searchResult" @search="searchHandler"></search-result>
    </div>
  </div>
</template>

<script>
import { api } from '@/api'
import searchConditon from './searchCondition'
import searchResult from './searchResult'


export default {
  name: 'example',
  props: {
    addBtnShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      api,
      condition: {},
      searchResult: [{}, {}, {}],
      //#region 分页组件
      totalSize: 0,
      pageNum: 1,
      pageSize: 10,
      //#endregion
    }
  },
  methods: {
    /**
     * 查询, 通过搜索按钮, 分页, 还是保存成功后的查询都在这里处理
     * @augments condtion {object} 条件
     */
    async searchHandler(condition) {
      //通过分页和保存成功后的查询没有查询条件, 这里做下判断
      if (condition) {
        //新的查询条件替换旧的查询条件
        this.condition = { ...this.condition, ...condition };
      }
      console.log(Object.assign({ ...this.condition }, { pageNum: this.pageNum, pageSize: this.pageSize }));
      const loadingIns = this.$loading({ text: '正在查询', target: '#app' });
      //这应里有一个axios调接口
      setTimeout(() => {
        this.searchResult.splice(0, this.searchResult.length, ...new Array(10));
        this.totalSize = parseInt(Math.random() * 100, 10);
        loadingIns.close();
      }, 2000)
    },
  },
  mounted() {
    console.log(this);
  },
  components: {
    searchConditon,
    searchResult
  }
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>

</style>



